// gender
var myChart_gender = echarts.init(document.querySelector('.echartsBox1 .gender'), null, {
    width: 350,
    height: 300
})
var myChart_major = echarts.init(document.querySelector('.echartsBox1 .major'), null, {
    width: 350,
    height: 300
})
var myChart_knowledge = echarts.init(document.querySelector('.echartsBox1 .knowledge'), null, {
    width: 350,
    height: 300
})
var myChart_user_activity_ranking = echarts.init(document.querySelector('.echartsBox1 .user_activity_ranking'), null, {
    width: 350,
    height: 300
})
var myChart_user_growth_trend = echarts.init(document.querySelector('.echartsBox1 .user_growth_trend'), null, {
    width: 350,
    height: 300
})
var myChart_knowledge_growth_trend = echarts.init(document.querySelector('.echartsBox1 .knowledge_growth_trend'), null, {
    width: 350,
    height: 300
})
var myChart_community_popular_trend = echarts.init(document.querySelector('.echartsBox1 .community_popular_trend'), null, {
    width: 350,
    height: 300
})

// 指定图表的配置项和数据



var option_user_growth_trend = {
    animationDuration: 1500,
    xAxis: {
        data: ['2024/04/14', '2024/04/15', '2024/04/16', '2024/04/17', '2024/04/18', '2024/04/19', '昨天']
      },
      yAxis: {},
      series: [
        {
          data: [698, 715, 715, 730, 760, 765, 766],
          type: 'line',
          smooth: true
        }
      ]
};

var option_knowledge_growth_trend = {
    animationDuration: 1500,
    legend: {
        data: ['总量', '图文动态', '提问', '文章', '需求'],
        orient: 'horizontal', //vertical
        textStyle: {  
            color: '#5a5a5ac3', // 设置图例文字颜色，根据需要调整  
            fontSize: 10 // 设置图例文字大小，根据需要调整  
        },
        bottom: '8px',

        
    },
    xAxis: {
        data: ['2024/04/14', '2024/04/15', '2024/04/16', '2024/04/17', '2024/04/18', '2024/04/19', '昨天']
      },
      yAxis: {},
      series: [
        {
            name: '总量',
            data: [30, 39, 39, 40, 45, 51, 60],
            type: 'line',
            smooth: true
        },
        {
            name: '图文动态',
            data: [14, 16, 16, 19, 20, 25, 30],
            type: 'line',
            smooth: true
        },
        {
            name: '提问',
            data: [15, 20, 20, 20, 19, 20, 20],
            type: 'line',
            smooth: true
        },
        {
            name: '文章',
            data: [1, 3, 3, 6, 6, 6, 10],
            type: 'line',
            smooth: true
        },
        {
            name: '需求',
            data: [0, 0, 0, 0, 0, 0, 0],
            type: 'line',
            smooth: true
        }
      ]
};
var option_community_popular_trend = {
    animationDuration: 1500,
    legend: {
        data: ['群聊/交流圈', '知识库/广场'],
        orient: 'horizontal', //vertical
        textStyle: {  
            color: '#5a5a5ac3', // 设置图例文字颜色，根据需要调整  
            fontSize: 10 // 设置图例文字大小，根据需要调整  
        },
        bottom: '8px',
    },
    xAxis: {
        data: ['2024/04/14', '2024/04/15', '2024/04/16', '2024/04/17', '2024/04/18', '2024/04/19', '昨天']
      },
      yAxis: {},
      series: [
        {
            name: '群聊/交流圈',
            data: [30, 39, 39, 40, 45, 51, 60],
            type: 'line',
            smooth: true
        },
        {
            name: '知识库/广场',
            data: [14, 16, 16, 19, 20, 25, 30],
            type: 'line',
            smooth: true
        }
      ]
};


//let raw_data = {}
// 获取数据

let userid = JSON.parse(localStorage.getItem('XGB-user')).id
let url = `https://fc-mp-e8e2bde5-0c0c-4622-87b5-66f8b08c3856.next.bspapp.com/getArticleList1.0`
let method = `getDataStatistics_H891Tj811YKk81`
let data = {
    userid: userid
}
axios.post(`${url}/${method}`, data)
.then(res=>{
  if(res.data.code == 0){//获取成功
    vm.raw_data = res.data.data

    // 性别
    var option_gender = {
      animationDuration: 1500,
      title: {
          text: '性别',
          left: 'center',
          top: 'center',
          textStyle: {
              color: '#333',
              fontSize: 18
          }
        },
        series: [
          {
            type: 'pie',
            data: [
              {
                value: vm.raw_data.boy,
                name: '男'
              },
              {
                value: vm.raw_data.girl,
                name: '女'
              }
            ],
            radius: ['30%', '60%']
          }
        ]
  };
  // 用户活跃度
  // 如果今天有用户活跃
  if(vm.raw_data.firstThree_pop_order.length != 0){
    let xAxis_data = vm.raw_data.firstThree_pop_order.map((item, index)=>{
      let name = ""
      if(item.name == ''){
        name = '无名用户'
      }else if(item.name.length > 4){
        name = `${item.name.slice(0,4)}...`
      }else{
        name = `${item.name.slice(0,4)}`
      }
      return name
    })
    let series_data1 = vm.raw_data.firstThree_pop_order.map((item, index)=>{
      let GroupChatScore = 0
      if('GroupChat' in item){
        GroupChatScore = item.GroupChat
      }
      return GroupChatScore
    })
    let series_data2 = vm.raw_data.firstThree_pop_order.map((item, index)=>{
      let articleScore = 0
      if('article' in item){
        articleScore = item.article
      }
      return articleScore
    })

      var option_user_activity_ranking = {
        animationDuration: 1500,
        legend: {
          data: ['群聊/交流圈', '知识库/广场'],
          orient: 'horizontal', //vertical
          textStyle: {  
              color: '#5a5a5ac3', // 设置图例文字颜色，根据需要调整  
              fontSize: 10 // 设置图例文字大小，根据需要调整  
          },
          bottom: '8px',
      },
        xAxis: {
          data: xAxis_data
        },
        yAxis: {},
        series: [
          {
            name: '群聊/交流圈',
            type: 'bar',
            data: series_data1
          },
          {
            name: '知识库/广场',
            type: 'bar',
            data: series_data2
          }
        ]
    };
  }
  
  // 知识库
  var option_knowledge = {
    animationDuration: 1500,
    title: {
        text: '知识库',
        left: 'center',
        top: 'center',
        textStyle: {
            color: '#333',
            fontSize: 18
        }
      },
      series: [
        {
          type: 'pie',
          data: [
            {
              value: vm.raw_data.article.twdt,
              name: '图文动态'
            },
            {
              value: vm.raw_data.article.tw,
              name: '提问'
            },
            {
              value: vm.raw_data.article.wz,
              name: '文章'
            },
            {
              value: 0,
              name: '需求'
            }
          ],
          radius: ['30%', '60%']
        }
      ]
};
// 专业

Object.keys(vm.raw_data.classCount).forEach(key => {
  //console.log(key, obj[key]);  
  vm.major_data.push({
    name: key,
    value: vm.raw_data.classCount[key]
  })
});
let hadMajorNum = 0
vm.major_data.forEach((item, index)=>{
  hadMajorNum+=item.value
})
vm.major_data.push({
  name: "未知",
  value: vm.raw_data.user_total - hadMajorNum
})
var option_major = {
  animationDuration: 1500,
  title: {
      text: '专业',
      left: 'center',
      top: 'center',
      textStyle: {
          color: '#333',
          fontSize: 18
      }
    },
    series: [
      {
        type: 'pie',
        data: vm.major_data,
        radius: ['30%', '60%']
      }
    ]
};




  let a = false
  let b = false
  let c = false
  let d = false
  let e = false
  let f = false
  let g = false
  let swiper = false
  document.querySelector("section").addEventListener('scroll', function() {  
      function isElementInViewport(el) {  
          const rect = el.getBoundingClientRect();  
          return rect.top < window.innerHeight && rect.bottom > 200; // 判断元素的上边界小于视口高度，下边界大于200~350 
      }
      let knowledge_growth_trend = document.querySelector(`.knowledge_growth_trendBox .title`); // 获取你要检测的元素
      let community_popular_trend = document.querySelector(`.community_popular_trendBox .title`); // 获取你要检测的元素
      let user_activity_ranking = document.querySelector(`.user_activity_rankingBox .title`); // 获取你要检测的元素
      let user_growth_trend = document.querySelector(`.user_growth_trendBox .title`); // 获取你要检测的元素
      let gender = document.querySelector(`.genderBox .title`); // 获取你要检测的元素
      let major = document.querySelector(`.majorBox .title`); // 获取你要检测的元素
      let knowledge = document.querySelector(`.knowledgeBox .title`); // 获取你要检测的元素
      if(!a){
        if (isElementInViewport(knowledge_growth_trend)) {  //元素在可视区域
          myChart_knowledge_growth_trend.setOption(option_knowledge_growth_trend);
          a = true
        }
      }else if(!b){
        if (isElementInViewport(community_popular_trend)) {  //元素在可视区域
          myChart_community_popular_trend.setOption(option_community_popular_trend);
          b = true
          console.log(`b=${b}`)
          if(!swiper){
            // // 折叠swiper
            document.querySelector(".adContainer").style.transition = 'all 0.9s'
            document.querySelector(".adContainer").style.height = 0
            document.querySelector(".adContainer2").style.height = 0
            document.querySelector(".adContainer2 .right").style.transition = 'all 0.9s'
            document.querySelector(".adContainer2 .right").style.top = '-5rem'
            document.querySelector(".adContainer2 .right.ad").style.transition = 'all 0.9s'
            document.querySelector(".adContainer2 .right.ad").style.top = '-5rem'
          }
        }
      }else if(!c){
        if (isElementInViewport(user_activity_ranking)) {  //元素在可视区域
          // rg 如果有用户活跃度
          if(vm.raw_data.firstThree_pop_order.length != 0){
            myChart_user_activity_ranking.setOption(option_user_activity_ranking);
          }
          
          c = true
        }
      }else if(!d){
        if (isElementInViewport(user_growth_trend)) {  //元素在可视区域
          myChart_user_growth_trend.setOption(option_user_growth_trend);
          d = true
        }
      }else if(!e){
        if (isElementInViewport(gender)) {  //元素在可视区域
          myChart_gender.setOption(option_gender);
          e = true
        }
      }else if(!f){
        if (isElementInViewport(major)) {  //元素在可视区域
          myChart_major.setOption(option_major);
          f = true
        }
      }else if(!g){
        if (isElementInViewport(knowledge)) {  //元素在可视区域
          myChart_knowledge.setOption(option_knowledge);
          g = true
        }
      } 
      
  });


























































  }else{//数据获取失败或没有权限或服务出错
    console.warn("获取统计数据出错")
    console.log(res.data)
  }
})



// 使用刚指定的配置项和数据显示图表。
// myChart_gender.setOption(option_gender);
// myChart_major.setOption(option_major);
// myChart_knowledge.setOption(option_knowledge);
// myChart_user_growth_trend.setOption(option_user_growth_trend);
// myChart_knowledge_growth_trend.setOption(option_knowledge_growth_trend);
// myChart_community_popular_trend.setOption(option_community_popular_trend);

